<template>
  <div>
    <el-dialog :title="option.title" :visible.sync="isShow" :close-on-click-modal="false" width="60%"
      @open="openDialog" @close="closeDialog('ruleForm')">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <el-row v-if="ruleForm.actId">
          <el-col :span="16">
            <el-form-item label="活动编号" prop="ACTIVITYTYPE">
              <el-input v-model="ruleForm.ACTIVITYTYPE" size="small" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="活动名称" prop="ACTIVITYTYPENAME">
              <el-input v-model="ruleForm.ACTIVITYTYPENAME" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="活动大类" prop="ACTIVITYCATEG">
              <el-select v-model="ruleForm.ACTIVITYCATEG"  clearable size="small" placeholder="请选择活动大类">
                <el-option v-for="item in dataOptions" :key="item.FIELDKEY" :label="item.FIELDVALUE" :value="item.FIELDKEY"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="日历颜色" prop="CALCOLOUR">
              <el-color-picker v-model="ruleForm.CALCOLOUR"></el-color-picker>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="是否带薪" prop="ISPAID">
              <el-switch active-value="1" inactive-value="0" v-model="ruleForm.ISPAID"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="是否休假" prop="ISENABLEHOLIDAY">
              <el-switch active-value="1" inactive-value="0" v-model="ruleForm.ISENABLEHOLIDAY"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="说明" prop="NOTES">
              <el-input type="textarea" :rows="2" v-model="ruleForm.NOTES" size="small"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
        <el-form-item>
          <el-button type="primary" size="small" @click="submitForm('ruleForm')">保存</el-button>
          <el-button size="small" type="danger" @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import request from "@/common/utils/requestWFM";
  import Update from '@/message/wfm/scheduleDataManage/activityManage/actUpdate'
  import Add from '@/message/wfm/scheduleDataManage/activityManage/actAdd'
  import optionQuery from '@/message/wfm/baseData/dictionaryManage/dictionaryQuery'

  export default {
    props: {
      option: Object
    },
    data() {
      return {
        dataOptions: [],//下拉列表
        ruleForm: {
          ACTIVITYTYPE: '',
          ACTIVITYTYPENAME: '',
          ACTIVITYCATEG: '',
          ISPAID: '0',
          ISENABLEHOLIDAY: '0',
          NOTES: '',
          CALCOLOUR: '#fff'
        },
        rules: {
          ACTIVITYTYPENAME: [{
              required: true,
              message: '请输入活动名称',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 10,
              message: '长度在 1 到 10 个字符',
              trigger: 'blur'
            }
          ],
          ACTIVITYCATEG: [{
            required: true,
            message: '请选择活动大类',
            trigger: 'change'
          }],
          ISPAID: [{
            required: true,
            message: '请选择是否带薪',
            trigger: 'change'
          }],
          ISENABLEHOLIDAY: [{
            required: true,
            message: '请选择是否休假',
            trigger: 'change'
          }],
          // NOTES: [{
          //   required: true,
          //   message: '请输入说明',
          //   trigger: 'blur'
          // }],
        },
      }
    },
    computed: {
      isShow: {
        get() {
          return this.option.isShow;
        },
        set(value) {
          this.option.isShow = value;
        }
      }
    },
    mounted() {
      this.queryOption()
    },
    methods: {
      // 下拉框查询
      async queryOption(){
        let resBody = new optionQuery();
        resBody.data.FIELDCODE = 'ACTIVITYCATEG';
        resBody.data.CurrPage = 1 
        resBody.data.PageRowNum = 20; 
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.dataOptions = response.BODY.FIEDATA
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      closeDialog(formName) {
        this.$refs[formName].resetFields();
        this.$refs[formName].clearValidate();
        this.ruleForm.ACTIVITYTYPE = ''
        this.ruleForm.ACTIVITYTYPENAME = ''
        this.ruleForm.ACTIVITYCATEG = ''
        this.ruleForm.ISPAID = '0'
        this.ruleForm.ISENABLEHOLIDAY = '0'
        this.ruleForm.NOTES = ''
        this.ruleForm.CALCOLOUR = '#fff'
      },
      openDialog() {
        if (this.$refs['ruleForm'] != undefined) {
          this.$refs['ruleForm'].clearValidate();
          this.$refs['ruleForm'].resetFields();
        }
        this.ruleForm.ACTIVITYTYPE = ''
        this.ruleForm.ACTIVITYTYPENAME = ''
        this.ruleForm.ACTIVITYCATEG = ''
        this.ruleForm.ISPAID = '0'
        this.ruleForm.ISENABLEHOLIDAY = '0'
        this.ruleForm.NOTES = ''
        this.ruleForm.CALCOLOUR = '#fff'
        if (this.option.title === '修改活动类型'){
          this.ruleForm = JSON.parse(JSON.stringify(this.option.row))
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            let resBody
            if (this.option.title === '新增活动类型') {
              resBody = new Add()
            } else {
              resBody = new Update()
            }
            resBody.data = JSON.parse(JSON.stringify(this.ruleForm))
            if (this.option.title === '新增活动类型') {
              delete resBody.data.ACTIVITYTYPE
            } 
            console.log(this.ruleForm.ISENABLEHOLIDAY )
            resBody.data.ISPAID = this.ruleForm.ISPAID 
            resBody.data.ISENABLEHOLIDAY = this.ruleForm.ISENABLEHOLIDAY 
            console.log(this.ruleForm)
            let response = await request(resBody);
            if (response.SYS_HEAD.ReturnCode == "000000") {
              this.option.isShow = false
              this.$emit("ListenAct")
            } else {
              this.$message({
                type: "error",
                message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD
                  .ReturnMessage
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  };

</script>

<style scoped lang="scss">

</style>
